<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
    <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- Bootstrap Core CSS -->
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel='stylesheet' type='text/css'/>
    <!-- Custom CSS -->
    <link href="${pageContext.request.contextPath}/css/backdoor.css" rel='stylesheet' type='text/css'/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/morris.css" type="text/css"/>
    <!-- Graph CSS -->
    <link href="${pageContext.request.contextPath}/css/font-awesome.css" rel="stylesheet">
    <%--mask--%>
    <link href="${pageContext.request.contextPath}/css/mask.css" rel="stylesheet">
    <!-- jQuery -->
    <script src="${pageContext.request.contextPath}/js/jquery-2.1.4.min.js"></script>
    <%--分页--%>
    <script src="${pageContext.request.contextPath}/js/myPagination.js"></script>
    <%--弹窗--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/BeAlert.css" type="text/css"/>
    <script src="${pageContext.request.contextPath}/js/BeAlert.js"></script>
    <script>
        $(function () {
            // 分页
            var div = $("#pagination");
            var curPage = ${pageInfo.pageNum};
            var allPage = ${pageInfo.pages};
            var length = 5;
            paginationConstructor(div, length, curPage, allPage);

            //显示小黑屋剩余时间
            setInterval(function showRemainTime() {
                var div = $(".remainTime");
                div.each(function (i) {
                    $(this).html(computeRemainTime($(this).prev().prev().text(), $(this).prev().text()));
                })
            }, 1000);
        });

        //格式化
        function add0(m) {
            m = m < 0 ? 0 : m;
            m = m < 10 ? '0' + m : m;
            return m;
        }

        //计算剩余时间
        function computeRemainTime(startTime, continueTime) {
            var remainTime = parseInt(startTime) + parseInt(continueTime) - new Date().getTime();
            var day = Math.floor(remainTime / (24 * 60 * 60 * 1000));
            remainTime = remainTime % (24 * 60 * 60 * 1000);
            var hours = Math.floor(remainTime / (60 * 60 * 1000));
            remainTime = remainTime % (60 * 60 * 1000);
            var minutes = Math.floor(remainTime / (60 * 1000));
            remainTime = remainTime % (60 * 1000);
            var seconds = Math.floor(remainTime / 1000);
            return add0(day) + '天' + add0(hours) + ':' + add0(minutes) + ':' + add0(seconds);
        }

        //解禁提示
        function freeConfirm(id) {
            confirm("确认提示：", "确定将此人移出小黑屋（不可撤销）？",
                function (isConfirm) {
                    if (isConfirm) {
                        window.location.href = '${pageContext.request.contextPath}/backdoor/blackHouse/delete/' + id;
                    }
                },
                {width: 400}
            );
        };

    </script>
</head>

<body>
<div class="page-container">
    <!--/content-inner-->
    <div class="left-content">
        <div class="mother-grid-inner">
            <!--header start here-->
            <jsp:include page="backdoor_header.jsp"/>
            <!--heder end here-->
            <!--导航-->
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="${pageContext.request.contextPath}/backdoor/index">主页</a>
                    <i class="fa fa-angle-right"></i>
                    <a href="${pageContext.request.contextPath}/backdoor/blackHouse">小黑屋</a>
                    <i class="fa fa-angle-right"></i>
                </li>
            </ol>

            <%--用户列表第一列--%>
            <div class="col-sm-4 w3-agileits-crd">
                <div class="card card-contact-list">
                    <div class="agileinfo-cdr">
                        <div class="card-body p-b-20">
                            <div class="list-group">
                                <c:forEach items="${pageInfo.list}" var="prison" begin="0" end="4">
                                    <div class="list-group-item media">
                                        <a class="pull-left" href="javascript:void(0);"
                                           onclick="openMask(${prison.id});">
                                            <img class="lg-item-img" src="${prison.user.avatarUrl}">
                                        </a>
                                        <div class="media-body">
                                            <a class="pull-left" href="javascript:void(0);"
                                               onclick="openMask(${prison.userId});">
                                                <div class="lg-item-heading">${prison.user.name}</div>
                                                <small class="lg-item-text">${prison.user.id}</small>
                                            </a>
                                            <a href="javascript:void(0);" class="pull-right"
                                               onclick="freeConfirm(${prison.userId})">
                                                <div class="lg-item-heading text-right">解禁</div>
                                                <span style="display: none">${prison.startTime}</span>
                                                <span style="display: none">${prison.continueTime}</span>
                                                <small class="remainTime lg-item-text"></small>
                                            </a>
                                        </div>
                                    </div>
                                </c:forEach>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <%--用户列表第二列--%>
            <div class="col-sm-4 w3-agileits-crd">
                <div class="card card-contact-list">
                    <div class="agileinfo-cdr">
                        <div class="card-body p-b-20">
                            <div class="list-group">
                                <c:forEach items="${pageInfo.list}" var="prison" begin="5" end="9">
                                    <div class="list-group-item media">
                                        <a class="pull-left" href="javascript:void(0);"
                                           onclick="openMask(${prison.id});">
                                            <img class="lg-item-img" src="${prison.user.avatarUrl}">
                                        </a>
                                        <div class="media-body">
                                            <a class="pull-left" href="javascript:void(0);"
                                               onclick="openMask(${prison.userId});">
                                                <div class="lg-item-heading">${prison.user.name}</div>
                                                <small class="lg-item-text">${prison.user.id}</small>
                                            </a>
                                            <a href="javascript:void(0);" class="pull-right"
                                               onclick="freeConfirm(${prison.userId})">
                                                <div class="lg-item-heading text-right">解禁</div>
                                                <span style="display: none">${prison.startTime}</span>
                                                <span style="display: none">${prison.continueTime}</span>
                                                <small class="remainTime lg-item-text"></small>
                                            </a>
                                        </div>
                                    </div>
                                </c:forEach>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <%--用户列表第三列--%>
            <div class="col-sm-4 w3-agileits-crd">
                <div class="card card-contact-list">
                    <div class="agileinfo-cdr">
                        <div class="card-body p-b-20">
                            <div class="list-group">
                                <c:forEach items="${pageInfo.list}" var="prison" begin="5" end="9">
                                    <div class="list-group-item media">
                                        <a class="pull-left" href="javascript:void(0);"
                                           onclick="openMask(${prison.id});">
                                            <img class="lg-item-img" src="${prison.user.avatarUrl}">
                                        </a>
                                        <div class="media-body">
                                            <a class="pull-left" href="javascript:void(0);"
                                               onclick="openMask(${prison.userId});">
                                                <div class="lg-item-heading">${prison.user.name}</div>
                                                <small class="lg-item-text">${prison.user.id}</small>
                                            </a>
                                            <a href="javascript:void(0);" class="pull-right"
                                               onclick="freeConfirm(${prison.userId})">
                                                <div class="lg-item-heading text-right">解禁</div>
                                                <span style="display: none">${prison.startTime}</span>
                                                <span style="display: none">${prison.continueTime}</span>
                                                <small class="remainTime lg-item-text"></small>
                                            </a>
                                        </div>
                                    </div>
                                </c:forEach>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--分页-->
            <div class="clearfix"></div>
            <div id="pagination"></div>
            <div class="clearfix"></div>

            <div class="clearfix"></div>
            <!--copy rights start here-->
            <jsp:include page="backdoor_footer.jsp"/>
            <!--COPY rights end here-->
        </div>
    </div>
    <!--//content-inner-->
    <!--/sidebar-menu-->
    <jsp:include page="backdoor_sidebar.jsp"/>
    <div class="clearfix"></div>
</div>
<!-- Bootstrap Core JavaScript -->
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>

<%--//用户页弹窗--%>
<jsp:include page="userPage.jsp"/>
</body>

</html>